<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw7">上传行业资质</text>
		</view>

		<view class="content padb30 flex_Z">
			<view class="  flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">行业资质 </text>
					<text class="tishi"> *</text>
				</view>
				<view class="describe">
					<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
					<text class="">如申请开通的经营类目需特殊资质，请上传，否则请跳过</text>
				</view>
			</view>
			<view class="flex_ZC">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="6"
					multiple :maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
					<view class="content_r mart20 flex_c">
						<image :src="baseUrl +'/static/image/hyzz.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="mart20 flex_Z">
			<text class="f24 c3">小提示：</text>
			<view class="mart10 flex_dq">
				<text class="f24 c3">经营食品调味、酒水等类目，请提供《食品流通许可证》或《食品经营许可证》或《食品生产许可证》或《食品小作坊登记证》;
					经营宠物药品等类目，涉及兽药请提供《兽药经营许可证》或《兽药生产许可证》;涉及宠物饲料请提供《饲料生产许可证》</text>
			</view>
		</view>

		<view class="btns flex_ld">
			<text class="sign_out" @click="leftClick">上一步</text>
			<view class="service flex_c">
				
				<text v-if="fileList1.length >0" @click="$u.debounce(nextStep, 300)">下一步</text>
				<text v-else @click="$u.debounce(nextStep, 300)">跳过</text>
			</view>
		</view>
		<view class="empty3"></view>

	</view>
</template>

<script>
	import UploadFile from '../../common/upload'
	import {
		baseURL
	} from "../../utils/request.js"

	import {
		settledFourSave
	} from '@/api/settled.js'
	export default {
		data() {
			return {
				title: "上传资质证明",
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				fileList1: [], //资质列表
				halfRoadRoute: [], //半路经图片列表
				seller_id: "",
				modifyState: false
			}
		},

		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(options.data)
				this.seller_id = data.id
				if (data.modifyState) {
					this.modifyState = data.modifyState
					this.ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
					let imgList = this.ymDetails.seller_auth.industry_qualification.map(item => {
						return this.getPathAfterCom(item)
					})
					this.halfRoadRoute = imgList
					this.ymDetails.seller_auth.industry_qualification.forEach(item => {
						this.fileList1.push({
							'thumb': item,
							'status': 'success'
						})
					})

				}

			}
			if (options.id) {
				this.seller_id = options.id
			}
		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 截取半路经
			getPathAfterCom(url) {
				const parts = url.split('.com');
				return parts.length > 1 ? parts[1] : '';
			},
			

			// 超出提示
			overSize(event) {
				uni.$u.toast(`第${event.index + 1}张图片过大,请重新上传!`)
			},
			// 删除图片
			deletePic(event) {
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1);
				this.halfRoadRoute.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const upload = new UploadFile()
				await upload.afterRead(event).then(res => {
					this[`fileList${event.name}`] = this[`fileList${event.name}`].concat(res.filelist)
					this.halfRoadRoute = this.halfRoadRoute.concat(res.halfRoadRoute)
					uni.hideLoading();
				})
			},
			// 下一步
			nextStep() {

				const params = {
					seller_id: this.seller_id,
				}
				if (this.modifyState) {
					params.modifyState = true
				}
				if (this.fileList1.length > 0) {
					uni.showLoading({
						title: '',
						mask: true
					});
					const data = {
						seller_id: this.seller_id,
						industry_qualification: this.halfRoadRoute.join(','),
						mask:1
					}
					settledFourSave(data).then(res => {
						console.log(res);

						if (res.code == 1) {
							uni.navigateTo({
								url: '/pageYm/ymJoin/storeDetail?data=' + JSON.stringify(params),
								success() {
									uni.hideLoading()
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageYm/ymJoin/storeDetail?data=' + JSON.stringify(params)
					})
				}


			},
			// 确认修改
			confirmModify() {
				uni.setStorageSync('hyzzShow', true)
				uni.setStorageSync('industryQualification', this.halfRoadRoute)
				uni.navigateBack({
					delta: 1
				})
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
	}

	.describe {
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 8rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
		align-items: center;
	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
	}

	.information_txt {
		width: 686rpx;
		padding: 16rpx 0;
	}

	.certification {
		width: 686rpx;
		height: 68rpx;
		border-radius: 8rpx;
		border: 1rpx dotted #D9D9D9;
		text-align: center;
		line-height: 68rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;

	}

	.iconAdd {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.content {
		width: 686rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		margin: 30rpx 0 10rpx;
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.content_r {
		width: 650rpx;
		height: 390rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}

	.content_r>image {
		width: 588rpx;
		height: 360rpx;
	}

	.mart10 {
		margin-top: 10rpx;
	}

	.mart20 {
		margin-top: 20rpx;
	}

	.padb30 {
		padding-bottom: 30rpx;
	}

	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}

	.qualifications {
		width: 686rpx;
		height: 88rpx;
		background: rgba(255, 195, 0, 0.05);
		border-radius: 16rpx;
		border: 2rpx dashed #FFCC28;
		margin: 20rpx 0;
	}

	.qualifications>text {
		margin-left: 10rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service>text {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service2 {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	/deep/.u-upload__wrap {
		display: flex;
		justify-content: center !important;
	}

	/deep/.u-upload__deletable {
		height: 24px !important;
		width: 24px !important;
	}

	/deep/.u-icon__icon {
		font-size: 30rpx !important;
		line-height: 30rpx !important;
	}
</style>